<template>
  <div class="common-layout">
    <el-container>
      <el-header style="" >
         <div class="title" style="background-color: rgb(246,246,246);">
            <div class="title-heard">
               <el-menu
               :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
               >
                  <el-menu-item index="0" >
      <img
        style="width: 50px"
        src="../assets/1111111.png"
        alt="Element logo"

        
      />
      
    </el-menu-item>
 
    <div class="flex-grow" />
      <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">书架</el-menu-item>
    <el-menu-item index="3">书库</el-menu-item>
    <el-menu-item index="4"  >登录</el-menu-item>


               </el-menu>
            </div>
         </div>
      </el-header>
      <el-main>
        <div class="introduce">
   <div class="introduce-left" style=" display: flex; margin: 40px;     margin-left: 100px;" >
      <img :src="result.img">
      <div class="one">
         <h1>{{ result.name}}</h1>
         <p style="margin-top: 30px;">最近更新：番外 陈泽宇日记 2024-02-10 9:46</p>
         <el-button type="warning" round style="margin-top: 80px;">开始阅读</el-button>
         <el-button round style="margin-top: 80px;">下载笔趣阁小说</el-button>
      </div>
      <el-divider direction="vertical" border-style="dashed" style="height: 234px; margin-left: 180px"  />

   </div>
   <div class="introduce-right">
      <img src="../assets/笔趣阁.png" alt="">
   </div>
</div>
     

<el-divider border-style="dashed" />
<div class="zuoping" style="width: 100%;" >
  <div class="zuoping-content" >
   <h1 style="margin-left: 30px; margin-top: 20px; overflow: hidden  ">作品简介</h1>  <el-divider border-style="dashed" />
   <h3 style="margin-left: 30px">{{result.intro }}</h3>
   <h1 style="margin-left: 30px; margin-top: 20px;">目录587章</h1>
   <el-divider border-style="dashed" />
      <h2 style="margin-left: 20px">第一卷*共587章</h2>
         <ul style="margin-left: 30px;" class="listdata">
            <li @click="devie(item.id)"  v-for="item in result2 " :key="item">{{ item.title }}</li>
            <div class="example-pagination-block">
  </div>
         </ul> 


  </div>

</div>

      </el-main>
    </el-container>
  </div>
</template>




<style scoped>
.flex-grow {
   display: flex;
  flex-grow: 1;
  justify-content: right;
}
.one{
flex: 1;
margin-left: 30px;
margin-top: 30px;
}
.introduce{
   display: flex;
   position: relative;
}
.introduce-right  {
position: absolute;
left: 50%;
height: 50%;
margin-left: 190px;
margin-top: 40px;
}
.el-main{
   padding: 0;
}
.zuoping-content{
   width: 1300px;
   margin: auto;
   background-color: rgb(246,246,246);
   overflow: hidden;
}
.listdata{
   height: 650px;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   cursor: pointer;
}
.listdata li{
   margin-top: 10px;
}
.listdata li:active{
   color: rgb(226, 155, 67);
}

</style>
<script setup>
import { shuxianglou } from '@/api/article';
import { useRoute , useRouter } from 'vue-router';
import { userstore } from '@/stores/userstore';
import { ref } from 'vue';
import { shuxiangloucontent } from '@/api/article';
const user = userstore();
const route = useRoute();
const router = useRouter();
const activeIndex = ref('1')

// 调用接口
 shuxianglou(route.query.id).then(res=>{
    //  console.log(res)
     user.newxiaoshuo=res
     
 })

 shuxiangloucontent(route.query.id).then(res=>{
     user.newdatacontent=res
 })
//  console.log();
 const result=user.newxiaoshuo
 const result2=user.newdatacontent
 
//  点击事件
const devie=(id)=>{
   // console.log(id)
   router.push({
      path:'/personal',
      query:{
         id:id
      }
   })


}
 





</script>